<template>
    <view>
        <view class="container" v-for="(item, index) in message" :key="index">
            <view class="notification">
                <view class="icon system"></view>
                <view class="info">
                    <view class="title">系统消息</view>
                    <view class="subtitle">{{ item.content }}</view>
                </view>
                <view class="date">{{ item.createTime }}</view>
            </view>

            <view class="notification">
                <view class="icon config"></view>
                <view class="info">
                    <view class="title">配套订单通知</view>
                    <view class="subtitle">{{ item.content }}</view>
                </view>
                <view class="date">{{ item.createTime }}</view>
            </view>

            <view class="notification">
                <view class="icon commerce"></view>
                <view class="info">
                    <view class="title">商城订单通知</view>
                    <view class="subtitle">{{ item.content }}</view>
                </view>
                <view class="date">{{ item.createTime }}</view>
            </view>

            <view class="notification">
                <view class="icon game"></view>
                <view class="info">
                    <view class="title">游玩订单通知</view>
                    <view class="subtitle">{{ item.content }}</view>
                </view>
                <view class="date">{{ item.createTime }}</view>
            </view>

            <view class="notification">
                <view class="icon transaction"></view>
                <view class="info">
                    <view class="title">交易消息</view>
                    <view class="subtitle">{{ item.content }}</view>
                </view>
                <view class="date">{{ item.createTime }}</view>
            </view>
        </view>
        <view>
            <text v-for="(account, index) in accounts" :key="index">{{ account }}</text>
        </view>
    </view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

export default {
    data() {
        return {
            content: '',
            createTime: '',
            messageid: 0,
            parentopenID: '',
            sonopenID: '',

            // 修改这里的拼写错误
            message: [],

            accounts: [],
            account: ''
        };
    },
    onLoad() {
        const that = this; // 保存页面实例的上下文

        uni.request({
            url: url + '/selectAllMessage',
            method: 'POST',
            data: {
                from: '支付宝',
                production: 'AlipayJSAPI'
            },
            headers: {
                'content-type': 'application/json' // 默认值
            },
            dataType: 'json',
            success: function (res) {
                if (res.data.data) {
                    that.setData({
                        // 使用 that 代替 this
                        message: res.data.data // 同样修改这里的拼写错误
                    });
                }
            },
            fail: function (error) {
                console.error('fail: ', JSON.stringify(error));
            },
            complete: function (res) {
                uni.hideLoading();
            }
        });
    },
    methods: {}
};
</script>
<style>
.container {
    padding: 20rpx;
}

.notification {
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    margin-bottom: 20rpx;
    background-color: #ffffff;
    margin-top: 10px;
    border-radius: 10rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.icon {
    width: 60rpx;
    height: 60rpx;
    margin-right: 20rpx;
}

.icon.system {
    background: url('https://pic.imgdb.cn/item/66821079d9c307b7e9167ba6.png') no-repeat center;
    background-size: cover;
}

.icon.config {
    background: url('https://pic.imgdb.cn/item/66821079d9c307b7e9167b84.png') no-repeat center;
    background-size: cover;
}

.icon.commerce {
    background: url('https://pic.imgdb.cn/item/66821079d9c307b7e9167b62.png') no-repeat center;
    background-size: cover;
}

.icon.game {
    background: url('https://pic.imgdb.cn/item/66821079d9c307b7e9167b4f.png') no-repeat center;
    background-size: cover;
}

.icon.transaction {
    background: url('https://pic.imgdb.cn/item/66821079d9c307b7e9167af7.png') no-repeat center;
    background-size: cover;
}

.info {
    flex: 1;
}

.title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
}

.subtitle {
    font-size: 28rpx;
    color: #999999;

    margin-top: 8px;
}

.date {
    font-size: 28rpx;
    color: #cccccc;
}

</style>
